<template>
  <div class="todayData">
    <div v-for="(item, index) in dataList" :key="index" @mouseenter="item.show = true" @mouseleave="item.show = false" class="card-item">
      <div class="info-box">
        <div>
          <div class="name">{{ item.name }}</div>
          <div class="compare-box">
            <span>较昨日：</span>
            <span class="compare">
              <i 
                class="zcytIcon"
                :class="{
                  'zcyt-raise raise': item.compareType,
                  'zcyt-reduce reduce': !item.compareType,
                }">
              </i>
              <span 
                :class="{
                  'raise': item.compareType,
                  'reduce': !item.compareType,
                }">
                {{ item.compare }}
              </span>
            </span>
          </div>
        </div>
        <div class="value-box">
          <span>{{ item.value }}</span>
          <span>{{ item.unit}}</span>
        </div>
      </div>
      <div class="icon-img" :style="'background-image: url('+ item.icon +')'"></div>
      <el-collapse-transition>
        <div v-show="item.show" class="total">{{ '总计：' + item.total + item.unit }}</div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script setup name="todayData">
  import user from '@/assets/img/user.png'
  import shop from '@/assets/img/shop.png'
  import factory from '@/assets/img/factory.png'
  import goods from '@/assets/img/goods.png'
  import order from '@/assets/img/order.png'
  import sale from '@/assets/img/sale.png'
  import cashout from '@/assets/img/cashout.png'
  import settlement from '@/assets/img/settlement.png'
  import { ref, reactive, toRefs, getCurrentInstance, onActivated } from 'vue'

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties

  const currentData = reactive({
    dataList: [
      {name: '新增用户数', compare: '25', compareType: true, value: '136', total: '4369', unit: '人', icon: user, show: false},
      {name: '新增厂商数', compare: '25', compareType: false, value: '136', total: '2156', unit: '个', icon: factory, show: false},
      {name: '新增商品数', compare: '25', compareType: false, value: '136', total: '2156', unit: '件', icon: goods, show: false},
      {name: '新增加盟商', compare: '25', compareType: true, value: '136', total: '2156', unit: '人', icon: shop, show: false},
      {name: '今日订单数', compare: '15', compareType: true, value: '99', total: '85925', unit: '单', icon: order, show: false},
      {name: '今日销售额', compare: '1369', compareType: false, value: '3547.58', total: '169852.68', unit: '元', icon: sale, show: false},
      {name: '今日出账额', compare: '1625', compareType: true, value: '2150.3', total: '12685.36', unit: '元', icon: cashout, show: false},
      {name: '今日结算额', compare: '89.6', compareType: false, value: '2512.56', total: '8695.25', unit: '元', icon: settlement, show: false}
    ]
  })
  let {dataList} = toRefs(currentData)

</script>

<style lang="less" scoped>
.todayData{
  width: calc(100% - 1.6%);
  padding: 0.8% 0.8% 0;
  display: flex;
  flex-wrap: wrap;
  .card-item{
    position: relative;
    width: calc(16% - 15px);
    padding: 10px 0 10px 15px;
    height: 80px;
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 0.8%;
    cursor: pointer;
    &:not(:nth-child(6n)) {
      margin-right: 0.8%;
    }
    .info-box{
      .name{
        font-weight: bold;
      }
      .compare-box{
        margin-top: 5px;
        font-size: 13px;
        .compare{
          i{
            font-size: 14px;
          }
          .raise{
            color: #13CE66;
            font-weight: bold;
          }
          .reduce{
            color: #FD1B0E;
            font-weight: bold;
          }
        }
      }
      .value-box{
        margin-top: 12px;
        >span{
          &:first-child{
            font-size: 20px;
            font-weight: bold;
            margin-right: 3px;
          }
          &:last-child{
            font-size: 15px;
          }
        }
      }
    }
    .icon-img{
      position: absolute;
      top: 25%;
      right: 6%;
      width: 50px;
      height: 50px;
      background-image: url('@/assets/img/shop.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .total{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100%;
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 20px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.4);
      color: #ffffff;
      font-weight: bold;
    }
  }
}
</style>